<script setup>
import { ref } from 'vue'
import GameItem from '@/components/GameItem.vue'
import { useRouter } from 'vue-router'
const router = useRouter()
let buttonColo = ref('#f5f5f5')

let textColor = ref('#818181')
let list = [1, 2, 3, 4]
// 获取整个窗口的宽度
var windowWidth = window.outerWidth
console.log('窗口宽度: ' + windowWidth)
let swipeWidth = windowWidth - 60

const props = defineProps({
  itemTitle: {
    type: String,
    default: '', //
  },
})

const gotoList = (id) => {
  console.log('gotoList')
  router.push({
    name: 'ApplicationList',
    params: {
      id,
    },
  })
}
</script>
<template>
  <div class="application-item-list">
    <div class="item-list-top">
      <div class="item-list-top-title">
        <div>{{ itemTitle }}</div>
        <div class="check-all" @click="gotoList()">查看全部</div>
      </div>
      <div class="item-list-tip">向左滑动 查看更多</div>

      <van-swipe class="my-swipe" indicator-color="white" :width="swipeWidth">
        <van-swipe-item v-for="(item, index) in list" :key="index" class="my-swipe-item">
          <GameItem
            v-for="(item, index) in list"
            :key="index"
            class="application-box-introduce"
            :buttonColo="buttonColo"
            :itemType="'cloud'"
            :btnType="'gain'"
            :textColor="textColor"
          ></GameItem
        ></van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.application-item-list {
  padding: 10px 0px;
  border-radius: 12px;
}
.item-list-tip {
  color: var(--op-gray-font-color);
}
.item-list-top-title {
  font-weight: bold;
  font-size: 22px;
  margin-top: 6px;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-right: 6px;
  .check-all {
    font-size: 15px;
    color: #0d7ffe;
    font-weight: 400;
  }
}
.application-box-introduce {
  margin-right: 10px;
}
.my-swipe .my-swipe-item:last-of-type {
  margin-right: 0px;
}
</style>
